<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1" name="viewport">
  <title>{{ client.organization }}</title>
  <link rel="icon" type="image" href="{{ client.logo }}" alt="{{ client.organization }} logo">

  <script type="text/javascript">
    var require = {
      paths: {
        table_template: '{{ client.table_template }}'
      }
    }
  </script>

  <script type="text/javascript" src="app/helper/object.assign-polyfill.js"></script>
  <script type="text/javascript" src="app/config/common.js"></script>
  <script type="text/javascript" src="app/config/jiff.js"></script>

  <script data-main="app/index" src="app/vendor/require.js"></script>
  <script type="text/javascript" src="app/helper/array.reduce-polyfill.min.js"></script>

  <script src="/jiff/jiff-client.js"></script>
  <script src="/jiff/ext/jiff-client-bignumber.js"></script>
  <script src="/jiff/ext/jiff-client-restful.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css"
        integrity="sha256-JvdVmxv7Q0LsN1EJo2zc1rACwzatOzkyx11YI4aP9PY=" crossorigin="anonymous"/>
  <link rel="stylesheet" type="text/css" href="styles/handsontable.full.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.10.0/css/alertify.min.css"
        integrity="sha256-bNEFYRlNlnu0CH4DIKCXv0F6JVl/DdA2M9XVZn317q0=" crossorigin="anonymous"/>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.10.0/css/themes/bootstrap.min.css"
        integrity="sha256-vt37wNLVK8ICNWGrl+1MLb+pjq33sn6v37Q/7OPgkSU=" crossorigin="anonymous"/>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.0/ladda-themeless.min.css"
        integrity="sha256-d7VZTlP9P3ZTCZ3Bkl8aGZ/+Vs4i+bpcOGNfibU7+LU=" crossorigin="anonymous"/>

  <link rel="stylesheet" href="styles/style.css">

</head>
<body>

<header>
  <div class="container">
    <h1>{{ client.organization }}<br/>
      <small> {{ client.subtitle }}</small>
    </h1>
    <div id="logos">
      <img src="{{ client.logo }}" alt="{{ client.organization }} Logo"/>
      <img src="images/bu.gif" alt="BU Logo"/>
    </div>
  </div>
</header>

<div id="shadow" class="ss-style-multitriangles"></div>

<main id="content" class="container">

  <div class="row">
    <section id="session-area" class="card col-md-10 col-md-offset-1">
      <h2 class="text-center">Input your data</h2>
      <p class="text-center">Please make sure your {{ client.session_key }} and participation code match the ones provided in the
        email
        sent to you by the {{ client.organization }}. Drag and drop your completed template file to encrypt and include your submission in
        the
        aggregate data.</p>
      <hr/>
      <div class="row">
        <div class="col-md-6">
          <form>
            <div class="form-group">
              <label class="control-label" for="session">{{ client.session_key }}</label>
              <input type="text" id="session" class="form-control" placeholder="{{ client.session_key }}" pattern="^[a-zA-Z0-9]{26}$"
                     autocomplete="off" required/>
              <span id="session-success" class="success-icon glyphicon glyphicon-ok form-control-feedback hidden"
                    aria-hidden="true"></span>
              <span id="session-fail" class="fail-icon glyphicon glyphicon-remove form-control-feedback hidden"
                    aria-hidden="true"></span>
              <span id="session-fail-help"
                    class="fail-help help-block hidden">Please input the 26-character {{ client.session_key }}.</span>
              <span id="session-fail-custom-help"
                    class="fail-custom help-block hidden"></span>
            </div>
            <div class="form-group">
              <label class="control-label" for="participation-code">Participation code</label>
              <input type="text" id="participation-code" class="form-control" placeholder="Participation code"
                     pattern="^[a-zA-Z0-9]{26}$"
                     autocomplete="off" required>
              <span id="participation-code-success"
                    class="success-icon glyphicon glyphicon-ok form-control-feedback hidden"
                    aria-hidden="true"></span>
              <span id="participation-code-fail"
                    class="fail-icon glyphicon glyphicon-remove form-control-feedback hidden"
                    aria-hidden="true"></span>
              <span id="participation-code-fail-help"
                    class="fail-help help-block hidden">Please input the 26-character participation code.</span>
              <span id="participation-code-fail-custom-help"
                    class="fail-custom help-block hidden"></span>
            </div>
          </form>
          {% if cohorts %}
          <div id="cohort-self-selection" class="form-group">
            <label id="cohort-drop-label" for="cohortDrop">{{ client.cohort }} selection</label>
            <select class="form-control" id="cohortDrop">
              <option value="-">-- Select option --</option>
              {% for cohort in cohorts %}
                <option value="{{ cohort.id }}">{{ cohort.name }}</option>
              {% endfor %}
            </select>
          </div>
          {% endif %}
        </div>
        <div class="col-md-6">
          <div id="drop-area">
            Drag and drop your completed template file here
            <br/>
            <p>&mdash;or&mdash;</p><br/>
            <button id="choose-file-button" class="btn btn-primary">Choose file</button>
            <label id="file-name"></label>
          </div>
          <input type="file" id="choose-file" accept=".xlsx,.xls">
        </div>
      </div>
    </section>
  </div>

  <div class="row">
    <section id="instructions" class="card col-md-10 col-md-offset-1">
      <h2 class="text-center">View your data</h2>
      <p class="text-center">Your data will appear here after you drag/drop or browse to find your completed Excel
        template file above.</p>
      <span id="expand-table-button" class="arrow-down"></span>

      <div id="tables-area">
        <hr/>
        <h3>Entered Data</h3>

        <span class="qtip-red">Red cells</span> <span>indicate an error. Click on the cell to see the error message.</span>
        <p></p>
        <span class="qtip-yellow"> Yellow cells</span> <span> indicate the value might be outside of the expected range. Please double-check
          to make sure the data is correct. You will still be able to submit your data.</span>
      </div>
    </section>
  </div>

  <div class="row">
    <section id="additional-questions" class="card col-md-10 col-md-offset-1">
      <h2 class="text-center">Answer additional questions</h2>

      <p class="text-center">
        We have included these questions to get instant feedback as to how this process went in order to improve the
        process in future years. Please know that the answers to these questions will be anonymous, and they will be
        considered separately from the encrypted and aggregated data above.
      </p>
      <hr/>

      <div id="questions">
      </div>


    </section>
  </div>


  <div class="row">
    <section id="review-and-submit" class="card col-md-10 col-md-offset-1">
      <h2 class="text-center">Verify and submit your data</h2>
      <p class="text-center">
        Please ensure that all entered data is accurate.
      </p>
      <hr/>
      <div class="row">
        <div class="col-md-6">
          <div id="totals-table"></div>
          <form>
            <div class="checkbox">
              <label>
                <input type="checkbox" id="verify" name="verify">I verified all data is correct.
              </label>
            </div>
          </form>
        </div>
        <div class="col-md-6">
          <div id="errors">
            <h4>Errors</h4>
            <ul id="validation-errors" class="has-error">
              <li>No Errors!</li>
            </ul>
          </div>
          <h4>Submission history</h4>
          <ul id="submission-history">
            <li>You have not submitted yet.</li>
          </ul>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <button type="submit" id="submit" class="btn btn-primary ladda-button btn-lg btn-block" disabled>Submit
          </button>
        </div>
      </div>
    </section>
  </div>
  <br/>
</main>

{% if client.phone or client.email %}
<footer id="footer" class="shadow-top">
  <div class="container">
      <div class="row text-xs-center text-sm-left text-md-left">
        <div class="col-xs-12 col-sm-5 col-md-5">
          <p class="text-muted footer-text">Need Help?</p>
          <ul class="list-unstyled text-muted footer-text">
            {% if client.phone %}
            <li><span class="glyphicon glyphicon-earphone"></span> {{ client.phone }}</li>
            {% endif %}
            {% if client.email %}
            <li> <span class="glyphicon glyphicon-envelope"></span> {{ client.email }}</li>
            {% endif %}
          </ul>
        </div>
      </div>
  </div>
</footer>
{% endif %}

</body>
</html>
